<template>
  <div class="symbol-panel">
    <div class="symbol-panel-title-area">
      <span class="symbol-panel-title">工具栏</span>
    </div>
    <el-tabs v-model="activeTab" tab-position="left" class="symbol-tabs">
      <el-tab-pane label="音高" name="pitch">
        <div class="symbol-list">
          <div
            v-for="(item, idx) in pitchList"
            :key="item"
            class="symbol-item"
            :class="{ 'symbol-item-active': pitchActiveIndex === idx }"
            @click="selectPitch(idx)"
          >
            <svg class="icon" aria-hidden="true"><use :xlink:href="'#' + pitchIconMap[item]" /></svg><span>{{ item }}</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="时值" name="duration">
        <div class="symbol-list">
          <div
            v-for="(item, idx) in durationList"
            :key="item"
            class="symbol-item"
            :class="{ 'symbol-item-active': durationActiveIndex === idx }"
            @click="selectDuration(idx)"
          >
            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-pause" /></svg><span>{{ item }}</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="和弦名" name="chord">
        <div class="symbol-chord-group">
          <div class="custom-chord-row">
            <el-button size="mini" @click="showCustomChordDialog = true">自定义和弦名称</el-button>
          </div>
          <div class="symbol-list">
            <div
              v-for="(item, idx) in customChords"
              :key="'custom-'+item"
              class="symbol-item custom-chord-item"
              :class="{ 'symbol-item-active': customChordActiveIndex === idx }"
              @click="selectCustomChord(idx)"
            >
              <svg class="icon" aria-hidden="true"><use xlink:href="#icon-folderopen" /></svg><span>{{ item }}</span>
              <el-button type="text" icon="el-icon-close" size="mini" class="custom-chord-delete" @click.stop="confirmRemoveCustomChord(idx)" />
            </div>
            <div
              v-for="(item, idx) in chordRootList"
              :key="'item-'+item"
              class="symbol-item"
              :class="{ 'symbol-item-active': chordActiveIndex === idx }"
              @click="selectChord(idx)"
            >
              <svg class="icon" aria-hidden="true"><use xlink:href="#icon-folderopen" /></svg><span>{{ item }}</span>
            </div>
          </div>
          <CustomChordDialog :visible="showCustomChordDialog" @confirm="addCustomChord" @cancel="showCustomChordDialog = false" />
          <el-dialog :visible.sync="showDeleteDialog" title="提示" width="300px" @close="showDeleteDialog = false">
            <span>确定要删除该自定义和弦吗？</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="showDeleteDialog = false">取消</el-button>
              <el-button type="danger" @click="removeCustomChord(deleteChordIdx)">删除</el-button>
            </span>
          </el-dialog>
        </div>
      </el-tab-pane>
      <el-tab-pane label="循环记号" name="barline">
        <div class="symbol-list">
          <div
            v-for="(item, idx) in barlineList"
            :key="'barline-'+item"
            class="symbol-item"
            :class="{ 'symbol-item-active': barlineActiveIndex === idx }"
            @click="selectBarline(idx)"
          >
            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-undo" /></svg><span>{{ item }}</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="指法" name="fingering">
        <div class="symbol-list">
          <div
            v-for="(item, idx) in fingeringList"
            :key="'fingering-'+item"
            class="symbol-item"
            :class="{ 'symbol-item-active': fingeringActiveIndex === idx }"
            @click="selectFingering(idx)"
          >
            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-outline-redo" /></svg><span>{{ item }}</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="演奏符号" name="performance">
        <div class="symbol-list performance-list">
          <div
            v-for="(item, idx) in performanceList"
            :key="'performance-'+item"
            class="symbol-item"
            :class="{ 'symbol-item-active': performanceActiveIndex === idx }"
            @click="selectPerformance(idx)"
          >
            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-Pdf" /></svg><span>{{ item }}</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="力度" name="dynamics">
        <div class="symbol-list">
          <div
            v-for="(item, idx) in dynamicsList"
            :key="'dynamics-'+item"
            class="symbol-item"
            :class="{ 'symbol-item-active': dynamicsActiveIndex === idx }"
            @click="selectDynamics(idx)"
          >
            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-Pdf" /></svg><span>{{ item }}</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="附点" name="dot">
        <div class="symbol-list">
          <div
            v-for="(item, idx) in dotList"
            :key="'dot-'+item"
            class="symbol-item"
            :class="{ 'symbol-item-active': dotActiveIndex === idx }"
            @click="selectDot(idx)"
          >
            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-pause" /></svg><span>{{ item }}</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="连接线" name="slur">
        <div class="symbol-list">
          <div
            v-for="(item, idx) in slurList"
            :key="'slur-'+item"
            class="symbol-item"
            :class="{ 'symbol-item-active': slurActiveIndex === idx }"
            @click="selectSlur(idx)"
          >
            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-pause" /></svg><span>{{ item }}</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="升降号" name="accidental">
        <div class="symbol-list">
          <div
            v-for="(item, idx) in accidentalList"
            :key="'accidental-'+item"
            class="symbol-item"
            :class="{ 'symbol-item-active': accidentalActiveIndex === idx }"
            @click="selectAccidental(idx)"
          >
            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-pause" /></svg><span>{{ item }}</span>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import CustomChordDialog from './CustomChordDialog.vue'
export default {
  name: 'SymbolPanel',
  components: { CustomChordDialog },
  data() {
    return {
      activeTab: 'pitch',
      pitchList: [
        '大字二组', '大字一组', '大字组', '小字组', '小字一组', '小字二组', '小字三组', '小字四组', '小字五组'
      ],
      pitchIconMap: {
        '大字二组': 'icon-a-5',
        '大字一组': 'icon-a-4',
        '大字组': 'icon-a-3',
        '小字组': 'icon-a-2',
        '小字一组': 'icon-a-1',
        '小字二组': 'icon-a-6',
        '小字三组': 'icon-a-7',
        '小字四组': 'icon-a-8',
        '小字五组': 'icon-a-9'
      },
      pitchActiveIndex: 4,
      durationList: [
        '全音符', '三分音符', '二分音符', '四分音符', '八分音符', '十六分音符', '三十二分音符', '六十四分音符'
      ],
      durationActiveIndex: 3,
      chordRootList: [
        'C', 'Db', 'D', 'Eb', 'E', 'F', 'F#', 'G', 'Ab', 'A', 'Bb', 'B',
        'maj', 'm', 'aug', 'dim', 'dim7', 'maj7', '6', '9', '69', '11', '13',
        'maj9', '7-5', '7+9', 'm6', 'm7', 'aug7', 'aug9', 'aug11', 'm7-5', '9-5', 'm9',
        'sus2', 'sus4', '7sus4', 'm7sus4'
      ],
      customChords: [],
      showCustomChordDialog: false,
      showDeleteDialog: false,
      deleteChordIdx: null,
      barlineList: [
        '双线小节线', '结束小节线', '循环开始小节线', '循环结束节线', '重复始结束小节线',
        'D.C.', 'D.S.', 'Segno', 'To Coda', 'Coda', 'Fine.', '跳房子1', '跳房子2', '跳房子结束句'
      ],
      barlineActiveIndex: null,
      chordActiveIndex: null,
      customChordActiveIndex: null,
      fingeringList: ['1', '2', '3', '4', '5'],
      fingeringActiveIndex: null,
      performanceList: [
        '颤音', '上波音', '下波音', '回音', '逆回音',
        '前倚音1个', '前倚音2个', '前倚音3个', '前倚音4个',
        '后倚音1个', '后倚音2个', '后倚音3个', '后倚音4个',
        '短断音', '断音', '琶音', '上琶音', '小琶音'
      ],
      performanceActiveIndex: null,
      dynamicsList: [
        '非常弱', '很弱', '弱', '稍弱', '稍强', '强', '很强', '非常强', '渐强符号', '渐弱符号'
      ],
      dynamicsActiveIndex: null,
      dotList: ['单附点', '复附点'],
      dotActiveIndex: null,
      slurList: ['三连音', '连音线'],
      slurActiveIndex: null,
      accidentalList: ['升号', '降号', '还原记号'],
      accidentalActiveIndex: null
    }
  },
  computed: {
    allChordList() {
      return [...this.chordRootList, ...this.customChords]
    }
  },
  created() {
    this.loadCustomChords()
  },
  mounted() {
    this.emitSymbolUpdate()
  },
  methods: {
    selectPitch(idx) {
      this.pitchActiveIndex = idx
      this.emitSymbolUpdate()
    },
    selectDuration(idx) {
      this.durationActiveIndex = idx
      this.emitSymbolUpdate()
    },
    loadCustomChords() {
      const arr = localStorage.getItem('customChords')
      this.customChords = arr ? JSON.parse(arr) : []
    },
    addCustomChord(name) {
      if (!name) return
      if (!this.customChords.includes(name)) {
        this.customChords.unshift(name)
        localStorage.setItem('customChords', JSON.stringify(this.customChords))
      }
      this.showCustomChordDialog = false
    },
    confirmRemoveCustomChord(idx) {
      this.deleteChordIdx = idx
      this.showDeleteDialog = true
    },
    removeCustomChord(idx) {
      this.customChords.splice(idx, 1)
      localStorage.setItem('customChords', JSON.stringify(this.customChords))
      this.showDeleteDialog = false
    },
    selectBarline(idx) {
      this.barlineActiveIndex = idx
    },
    selectChord(idx) {
      this.chordActiveIndex = idx
      this.customChordActiveIndex = null
      console.log('emit chord', this.chordRootList[idx])
      this.$emit('update:chord', this.chordRootList[idx])
    },
    selectCustomChord(idx) {
      this.customChordActiveIndex = idx
      this.chordActiveIndex = null
      this.$emit('update:chord', this.customChords[idx])
    },
    selectFingering(idx) {
      this.fingeringActiveIndex = idx
    },
    selectPerformance(idx) {
      this.performanceActiveIndex = idx
    },
    selectDynamics(idx) {
      this.dynamicsActiveIndex = idx
    },
    selectDot(idx) {
      this.dotActiveIndex = idx;
      // 可在此处emit事件或处理附点逻辑
    },
    selectSlur(idx) {
      this.slurActiveIndex = idx;
      // 可在此处emit事件或处理连接线逻辑
    },
    selectAccidental(idx) {
      this.accidentalActiveIndex = idx;
      // 可在此处emit事件或处理升降号逻辑
    },
    emitSymbolUpdate() {
      this.$emit('update:symbol', {
        pitch: this.pitchList[this.pitchActiveIndex],
        pitchIndex: this.pitchActiveIndex,
        duration: this.durationList[this.durationActiveIndex],
      })
    }
  }
}
</script>
<style scoped>
.symbol-panel {
  background: #fff;
  /* border-radius: 12px; */
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.08);
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 280px;
}
.symbol-panel-title-area {
  padding: 14px 0 10px 0;
  margin-bottom: 10px;
  border-bottom: 1.5px solid #e4e7ed;
  text-align: center;
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.symbol-panel-title {
  font-size: 1.13rem;
  font-weight: 700;
  color: #333;
  letter-spacing: 2px;
}
.symbol-tabs {
  flex: 1;
}
.symbol-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 0 0 0;
  justify-content: flex-start;
  padding-left: 12px;
}
.symbol-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
  cursor: pointer;
  user-select: none;
}
.symbol-item .icon {
  width: 39px;
  height: 39px;
  margin-bottom: 0px;
}
.symbol-item span {
  font-size: 12px;
  color: #333;
  padding: 5px 6px;
}
.symbol-item-active {
  background: #e6f0ff;
  border-radius: 6px;
  box-shadow: 0 2px 8px 0 rgba(64,158,255,0.08);
  color: #409eff;
}
.custom-chord-row {
  margin-top: 12px;
  text-align: left;
}
.symbol-chord-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}
.custom-chord-list {
  margin-top: 4px;
}
.custom-chord-item {
  position: relative;
}
.custom-chord-delete {
  position: absolute;
  right: 2px;
  top: 2px;
  color: #f56c6c;
  font-size: 14px;
  padding: 0;
  z-index: 2;
}
.performance-list {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}
</style> 